<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="../jquery-3.3.1.min.js"></script>

    <style>
        #box{
            width: 400px;
            height: 400px;
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <h1>jQueryDOM 和 JSDOM 的区别 以及相互转化</h1>


    <hr>


    <div id="box"></div>
    <img src="../1.jpg" width="50" id="myimg">

    <script>
        
        var box = document.getElementById('box');//JSDOM

        var $box = $('#box');//jQuery DOM

        console.dir(box);
        console.dir($box);


        //改变 box css样式
        //JS
        box.style.backgroundColor = '#ccc';//1
        

        //jQuery 
        $box.css('background-color','red')//1
        
        //JS
        myimg.width = 600;

        //jQuery
        $('myimg').attr('width',300);


        //转化  JSDOM -> jQ DOM
        $(box).css('background-color','yellow'); //1     


        //转化 jQ DOM -> JSDOM
        $box[0].style.backgroundColor = 'blue';  

        //第二种方式  jQ DOM -> JSDOM
        $box.get(0).style.backgroundColor = 'green';


        var $ = '静静';
        //此时 命名与jQ 冲突
        // $('h1').css('color','red');//报错

        jQuery('h1').css('color','red');//1

    </script>
</body>
</html>